const {defineConfig} = require('@vue/cli-service')
const path = require('path')

function resolve(dir) {
    return path.resolve(__dirname, dir)
}

// xt-svg 图标根路径
let xtSvgRoot = process.env.VUE_APP_XT_SVG_ROOT
// svg 中 symbol 的 id 自定义前缀
let xtSvgPrefix = process.env.VUE_APP_XT_SVG_PREFIX
// svg 中 symbol 的 id 分割符
let xtSvgSplit = process.env.VUE_APP_XT_SVG_SPLIT

module.exports = defineConfig({
    transpileDependencies: true,
    publicPath: process.env.BASE_URL,
    chainWebpack: (config) => {
        // 让 webpack 识别路径别名
        config.resolve.alias
            .set('@', resolve('src'))
        config.module.rule('svg')
            .exclude.add(resolve(xtSvgRoot))
            .end()
        config.module.rule(xtSvgPrefix)
            .test(/\.svg$/)
            .include.add(resolve(xtSvgRoot))
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: `${xtSvgPrefix}${xtSvgSplit}[name]`
            })
            .end()
            .use('svgo-loader')
            .loader('svgo-loader')
            .options({
                plugins: [
                    {
                        name: 'removeAttrs',
                        params: {
                            attrs: '(fill)'
                        }
                    }
                ]
            })
            .end()
    }
})
